<!-- 自定义模仿系统的对话框 使用同CaLogin -->
<template>
	<PopupView ref="popup" :type="dialogInfo.type === 'modal' ? 'center' : 'bottom'">
		<div v-if="dialogInfo">
			<div v-if="dialogInfo.type === 'modal'" :style="[{width: modalWidth + 'px'}]">
				<uni-card isFull>
					<div slot="title" :style="[{paddingTop: '10px', paddingBottom: '5px', borderBottom: `${dialogInfo.content || dialogInfo.editable || dialogInfo.remark || dialogInfo.alert ? 1 : 0}px solid #E9E9E9`}, dialogInfo.headerStyle]">
						<div v-if="dialogInfo.showClose" class="space-between">
							<div v-if="dialogInfo.subTitle">
								<CaLabel :text="dialogInfo.title" title="3" @click="onText('title')"/>
								<CaLabel class="ellipsis1" :text="dialogInfo.subTitle" size="14" color="#999" @click="onText('subTitle')"/>
							</div>
							<CaLabel v-else :text="dialogInfo.title" title="3" @click="onText('title')"/>
							<CaLabel v-if="dialogInfo.closeText" :text="dialogInfo.closeText" size="10" color="#999" @click="onClose"/>
							<IconFont v-else :type="dialogInfo.closeIcon" size="15" @click="onClose"/>
						</div>
						<div v-else class="center-column" :style="[{padding: dialogInfo.subTitle ? '0' : '10px 0'}]">
							<CaLabel :text="dialogInfo.title" title="3" @click="onText('title')"/>
							<CaLabel class="ellipsis1" v-if="dialogInfo.subTitle" :text="dialogInfo.subTitle" size="14" color="#999" @click="onText('subTitle')"/>
						</div>
					</div>
					<component v-if="dialogInfo.customVue" :is="dialogInfo.customVue"></component>
					<div v-if="dialogInfo.content || dialogInfo.editable || dialogInfo.remark || dialogInfo.alert" :style="[{margin: `${dialogInfo.alert ? 0 : 10}px 0 ${dialogInfo.remark ? 0 : 10}px 0`, display: 'flex', flexDirection: 'column'}]">
						<div v-if="dialogInfo.alert" class="center" @click="onText('alert')"><CaLabel :text="dialogInfo.alert" :style="[dialogInfo.alertStyle]"/></div>
						<div v-if="dialogInfo.editable" class="center-column" :style="[{marginBottom: '-10px'}]">
							<CaLabel v-if="dialogInfo.text" :text="dialogInfo.text" :style="[dialogInfo.textStyle]" @click="onText('text')"/>
							<uni-forms ref="form" :rules="modelRules" v-model="modelValue" :labelWidth="labelWidth" :style="[dialogInfo.contentStyle]">
								<block v-for="(record, index) in modelOptions" v-if="!record.showAction || record.showAction()" :key="index">
									<div v-if="record.top_remark" :style="[record.top_remark_style]"><CaLabel :text="record.top_remark"/></div>
									<uni-forms-item :label="record.title" :name="record.key" :required="record.required" :hideLabel="record.hideLabel">
										<!-- #ifdef APP || H5 -->
										<CaDbComponent v-model="modelValue[record.key]" :record="record" :data-info="modelValue" @change="(e1, e2) => record.onChange && record.onChange(record, modelValue, e1, e2)"/>
										<!-- #endif -->
										<!-- #ifndef APP || H5 -->
										<uni-easyinput v-if="record.componentName === 'input'" v-model="modelValue[record.key]" :placeholder="`请输入${record.placeholder || record.title || ''}`" :type="record.typeDetail || 'text'"/>
										<uni-data-checkbox v-else-if="record.componentName === 'checkbox'" v-model="modelValue[record.key]" :multiple="record.isMultiple" :localdata="record.enum" :map="record.map"/>
										<!-- #endif -->
									</uni-forms-item>
									<div v-if="record.bottom_remark" :style="[record.bottom_remark_style]"><CaLabel :text="record.bottom_remark"/></div>
								</block>
							</uni-forms>
						</div>
						<div v-else-if="dialogInfo.content" class="center-column">
							<block v-if="dialogInfo.qrcode">
								<CaLabel v-if="dialogInfo.text" :text="dialogInfo.text" :style="[{marginBottom: '15px'}, ...dialogInfo.textStyle]" @click="onText('text')"/>
								<CaQrCode :content="dialogInfo.content" :size="modalWidth * 0.8" @click="onText('content')"/>
							</block>
							<div v-else-if="dialogInfo.content.indexOf('\n') > -1" @click="onText('content')">
								<CaLabel v-for="(text, index) in dialogInfo.content.split('\n')" :key="index" :text="text" space="0" :style="[dialogInfo.contentStyle]"/>
							</div>
							<CaLabel v-else :text="dialogInfo.content" :lineHeight="false" :space="dialogInfo.content.length > 16 ? 2 : 0" :style="[dialogInfo.contentStyle]" @click="onText('content')"/>
						</div>
						<div v-if="dialogInfo.remark" class="center" style="z-index: 9;" @click="onText('remark')"><CaLabel :text="dialogInfo.remark" :style="[dialogInfo.remarkStyle]"/></div>
					</div>
					<div slot="actions" v-if="bottomButtons(true)" :class="[`${dialogInfo.type}-button`]" style="border-top: 1px solid #E9E9E9;padding: 5px 0;">
						<block v-for="(button, index) in bottomButtons(false)" :key="index">
							<div v-if="index > 0" :style="[{width: '1px', height: '20px', backgroundColor: '#E9E9E9'}]"/>
							<DownloadExcel v-if="dialogInfo.excel && dialogInfo.excel.show && button.value === 1" :excel="dialogInfo.excel" :beforeFinish="beforeFinish" style="margin: 0 0 3px 0;"/>
							<CaLabel v-else :text="button.text" title :color="button.color" size="14" @click="onClick(button.value)"/>
						</block>
					</div>
				</uni-card>
			</div>
			<div v-else>
				<uni-card margin="5px" padding="0">
					<div slot="title" :style="[{paddingTop: '10px', paddingBottom: '5px', borderBottom: `${dialogInfo.content || dialogInfo.editable || dialogInfo.remark || dialogInfo.alert ? 1 : 0}px solid #E9E9E9`}, dialogInfo.headerStyle]">
						<div v-if="dialogInfo.showClose" class="space-between">
							<div v-if="dialogInfo.subTitle">
								<CaLabel :text="dialogInfo.title" title="3" @click="onText('title')"/>
								<CaLabel class="ellipsis1" :text="dialogInfo.subTitle" size="14" color="#999" @click="onText('subTitle')"/>
							</div>
							<CaLabel v-else :text="dialogInfo.title" title="3" @click="onText('title')"/>
							<CaLabel v-if="dialogInfo.closeText" :text="dialogInfo.closeText" size="10" color="#999" @click="onClose"/>
							<IconFont v-else :type="dialogInfo.closeIcon" size="15" @click="onClose"/>
						</div>
						<div v-else class="center-column">
							<CaLabel :text="dialogInfo.title" title="3" @click="onText('title')"/>
							<CaLabel class="ellipsis1" :text="dialogInfo.subTitle" size="14" color="#999" @click="onText('subTitle')"/>
						</div>
					</div>
					<div v-if="dialogInfo.content || dialogInfo.editable || dialogInfo.remark || dialogInfo.alert" :style="[{margin: `${dialogInfo.alert ? 0 : 10}px 0 ${dialogInfo.remark ? 0 : 10}px 0`, display: 'flex', flexDirection: 'column'}]">
						<div v-if="dialogInfo.alert" class="center" @click="onText('alert')"><CaLabel :text="dialogInfo.alert" :style="[dialogInfo.alertStyle]"/></div>
						<div v-if="dialogInfo.editable" class="center-column" :style="[{marginBottom: '-10px'}]">
							<CaLabel v-if="dialogInfo.text" :text="dialogInfo.text" :style="[dialogInfo.textStyle]" @click="onText('text')"/>
							<uni-forms ref="form" :rules="modelRules" v-model="modelValue" :labelWidth="labelWidth" :style="[dialogInfo.contentStyle]">
								<block v-for="(record, index) in modelOptions" v-if="!record.showAction || record.showAction()" :key="index">
									<div v-if="record.top_remark" :style="[record.top_remark_style]"><CaLabel :text="record.top_remark"/></div>
									<uni-forms-item :label="record.title" :name="record.key" :required="record.required" :hideLabel="record.hideLabel">
										<!-- #ifdef APP || H5 -->
										<CaDbComponent v-model="modelValue[record.key]" :record="record" :data-info="modelValue" @change="(e1, e2) => record.onChange && record.onChange(record, modelValue, e1, e2)"/>
										<!-- #endif -->
										<!-- #ifndef APP || H5 -->
										<uni-easyinput v-if="record.componentName === 'input'" v-model="modelValue[record.key]" :placeholder="`请输入${record.placeholder || record.title || ''}`" :type="record.typeDetail || 'text'"/>
										<uni-data-checkbox v-else-if="record.componentName === 'checkbox'" v-model="modelValue[record.key]" :multiple="record.isMultiple" :localdata="record.enum" :map="record.map"/>
										<!-- #endif -->
									</uni-forms-item>
									<div v-if="record.bottom_remark" :style="[record.bottom_remark_style]"><CaLabel :text="record.bottom_remark"/></div>
								</block>
							</uni-forms>
						</div>
						<div v-else-if="dialogInfo.content" class="center-column">
							<block v-if="dialogInfo.qrcode">
								<CaLabel v-if="dialogInfo.text" :text="dialogInfo.text" :style="[{marginBottom: '15px'}, ...dialogInfo.textStyle]" @click="onText('text')"/>
								<CaQrCode :content="dialogInfo.content" :size="modalWidth * 0.8" @click="onText('content')"/>
							</block>
							<div v-else-if="dialogInfo.content.indexOf('\n') > -1" @click="onText('content')">
								<CaLabel v-for="(text, index) in dialogInfo.content.split('\n')" :key="index" :text="text" space="0" :style="[dialogInfo.contentStyle]"/>
							</div>
							<CaLabel v-else :text="dialogInfo.content" space="0" :style="[dialogInfo.contentStyle]" @click="onText('content')"/>
						</div>
						<div v-if="dialogInfo.remark" class="center" @click="onText('remark')"><CaLabel :text="dialogInfo.remark" :style="[dialogInfo.remarkStyle]"/></div>
					</div>
				</uni-card>
				<uni-card margin="5px" padding="0">
					<div v-for="(item, index) in dialogInfo.itemList" :key="index" :style="[{borderTop: `${index === 0 ? 0 : 1}px solid #E9E9E9`, height: '44px'}]" class="center" @click="onClick(index)">
						<CaLabel :text="dialogInfo.itemNameKey ? item[dialogInfo.itemNameKey] : item" :color="dialogInfo.itemColorKey ? item[dialogInfo.itemColorKey] : dialogInfo.itemColor" size="14"/>
					</div>
				</uni-card>
				<uni-card margin="5px">
					<div class="center" style="width: 100%;" @click="onClose">
						<CaLabel slot="title" title text="取消" :color="core.theme.color.main"/>
					</div>
				</uni-card>
			</div>
		</div>
	</PopupView>
</template>

<script>
	
	import base from '@/components/index.vue'
	import DownloadExcel from './DownloadExcel.vue'
	
	/**
	 * 该组件直接在页面文件中引用，务必要求ref="dialog"
	 * core中有使用该组件的方法，showModal和showActionSheet，其实就是调用$root.$refs.diaolg.open(dialogInfo)
	 */
	
	export default {
		extends: base,
		emits: ['close'],
		components: {
			DownloadExcel
		},
		props: {
			// 对话框的宽度，默认80%，最大400px
			width: [String, Number]
		},
		data() {
			return {
				dialogInfo: {},
				modalWidth: 400,
				modelOptions: [],
				modelValue: {},
				modelRules: {},
				labelWidth: '80px'
			}
		},
		methods: {
			open(dialog) { // 提供给core/store/dialog.js调用
				var width = this.width || this.deviceInfo.windowWidth * 0.8
				if (width > 400) {
					width = 400
				}
				this.modalWidth = width
				var {placeholderText, modelOptions, editable, modelValue, labelWidth, modelRules = {}, content, typeDetail = 'text', required} = dialog
				if (editable) {
					// 默认的字段：content
					if (modelOptions) {
						if (modelOptions.length === 1 && !modelOptions[0].key) {
							modelOptions[0].key = 'content'
						}
						this.modelOptions = modelOptions
					} else {
						var placeholder = placeholderText || '请输入内容'
						modelOptions = [
							{
								key: 'content',
								title: '内容',
								componentName: 'input',
								typeDetail,
								placeholder,
								hideLabel: true
							}
						]
						this.modelOptions = modelOptions
					}
					this.labelWidth = labelWidth || this.core.form.getModelOptionsLabelWidth(modelOptions)
					modelOptions.forEach(item => {
						if (item.required) {
							if (!modelRules[item.key]) {
								modelRules[item.key] = {}
							}
							if (!modelRules[item.key].rules) {
								modelRules[item.key].rules = []
							}
							modelRules[item.key].rules.push({
								required: true,
								errorMessage: typeof(item.required) === 'string' ? item.required : `${item.title}不能为空`,
							})
						}
					})
					if (required && (!modelRules || !modelRules.content)) {
						if (!modelRules.content) {
							modelRules.content = {}
						}
						if (!modelRules.content.rules) {
							modelRules.content.rules = []
						}
						modelRules.content.rules.push({
							required: true,
							errorMessage: typeof(required) === 'string' ? required : `内容不能为空`,
						})
					}
					if (modelValue) {
						this.modelValue = modelValue
					} else {
						this.modelValue = {content}
					}
					this.modelRules = modelRules
				}
				this.dialogInfo = dialog
				this.$refs.popup.open()
			},
			
			close() { // 提供给core/store/dialog.js调用
				this.$refs.popup.close()
			},
			
			// 下载完成前
			beforeFinish() {
				const {beforeFinish} = this.dialogInfo.excel
				beforeFinish && beforeFinish()
				this.onClick('excel')
			},
			
			// 文字点击事件
			onText(type) {
				switch (type) {
					case 'title':
					case 'subTitle':
					case 'alert':
					case 'text':
					case 'content':
					case 'remark':
					default:
						break
				}
				if (this.dialogInfo.onText) {
					this.dialogInfo.onText(type, () => {
						// 关闭对话框
						this.onClick(0)
					})
				}
			},
			
			/**
			 * 点击事件
			 * modal中：0：左边按钮- 取消；1：中间按钮；2：右边按钮-确定
			 * actionSheet中：点击的索引tabIndex
			 */
			onClick(e) {
				var {dialogInfo} = this
				if (!dialogInfo.clickDialog) {
					dialogInfo = this.$root.$children[0].dialogData
				}
				var {clickDialog, editable, itemList, type} = dialogInfo
				const {modelOptions, modelValue} = this
				dialogInfo.modelValue = modelValue
				if (editable) {
					// 走校验流程
					const validate = () => {
						this.$refs.form.validate().then(res => {
							// 如果只有一项，将该项的值赋值给content
							if (modelOptions.length === 1) {
								dialogInfo.content = modelValue[modelOptions[0].key || 'content']
							}
							clickDialog(e)
						})
					}
					
					if (type === 'modal') {
						if (e === 2) {
							validate()
						} else {
							clickDialog(e)
						}
					} else {
						if (e === itemList.length - 1) {
							validate()
						} else {
							clickDialog(e)
						}
					}
				} else {
					clickDialog(e)
				}
			},
			
			/**
			 * modal底部按钮
			 * bool：是否返回是否存在的布尔值
			 */
			bottomButtons(bool) {
				const {showCancel, cancelText, centerText, confirmText, cancelColor, centerColor, confirmColor, excel} = this.dialogInfo
				if (bool) {
					return (showCancel && cancelText) || centerText || confirmText
				}
				const arr = []
				if (showCancel && cancelText) {
					arr.push({
						text: cancelText,
						color: cancelColor,
						value: 0
					})
				}
				if (centerText || (excel && excel.show)) {
					arr.push({
						text: centerText,
						color: centerColor,
						value: 1
					})
				}
				if (confirmText) {
					arr.push({
						text: confirmText,
						color: confirmColor,
						value: 2
					})
				}
				return arr
			},
			
			// 点击了关闭
			onClose() {
				this.onClick(-1)
				this.$emit('close')
			}
		}
	}
</script>

<style>
	.modal-button {
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: space-around;
	} 
	
	.actionSheet-button {
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-direction: column;
	}
	
	.form {
		width: 100%;
	}
	
	/**
	 * 1行显示不下，用省略号代替
	 */
	.ellipsis1 {
		overflow: hidden; 
		text-overflow: ellipsis; 
		white-space: nowrap;
	}
</style>